<!DOCTYPE html>
<html>
<head>
  <title>MapLibre GL + OpenFreeMap demo</title>
<script src="https://unpkg.com/maplibre-gl/dist/maplibre-gl.js"></script>
<link href="https://unpkg.com/maplibre-gl/dist/maplibre-gl.css" rel="stylesheet" />
<style>
body, html {
  margin: 0;
  padding: 0;
}
</style>
</head>
<body>
<div id="map" style="width: 100%; height: 100vh"></div>
<script>
// Function to generate random coordinates within a bounding box
function getRandomCoordinate(minLng, maxLng, minLat, maxLat) {
  const lng = Math.random() * (maxLng - minLng) + minLng;
  const lat = Math.random() * (maxLat - minLat) + minLat;
  return [lng, lat];
}

// San Francisco bounding box (approximate)
const sfBounds = {
  minLng: -122.5155,
  maxLng: -122.3247,
  minLat: 37.7038,
  maxLat: 37.8324
};

// Create the map
const map = new maplibregl.Map({
  style: 'https://tiles.openfreemap.org/styles/liberty',
  center: [-122.4194, 37.7749], // San Francisco coordinates
  zoom: 11,
  container: 'map',
});
map.setPitch(50);

// Array to store all marker coordinates
const markerCoordinates = [];

// Generate 1000 random markers
for (let i = 0; i < 1000; i++) {
  const [lng, lat] = getRandomCoordinate(
    sfBounds.minLng,
    sfBounds.maxLng,
    sfBounds.minLat,
    sfBounds.maxLat
  );
  markerCoordinates.push([lng, lat]);
}

// Option 1: Use built-in scaling
function addScaledMarkers() {
  markerCoordinates.forEach(coord => {
    new maplibregl.Marker({ scale: 0.5 }) // Scale down to 50%
      .setLngLat(coord)
      .addTo(map);
  });
}

// Option 2: Custom HTML element
function addCustomMarkers() {
  markerCoordinates.forEach(coord => {
    const el = document.createElement('div');
    el.className = 'custom-marker';
    el.style.width = '10px';
    el.style.height = '10px';
    el.style.borderRadius = '50%';
    el.style.backgroundColor = 'red';

    new maplibregl.Marker(el)
      .setLngLat(coord)
      .addTo(map);
  });
}

// Option 3: Use circle layer instead of markers
function addCircleLayer() {
  map.on('load', () => {
    map.addSource('markers', {
      type: 'geojson',
      data: {
        type: 'FeatureCollection',
        features: markerCoordinates.map(coord => ({
          type: 'Feature',
          geometry: {
            type: 'Point',
            coordinates: coord
          }
        }))
      }
    });

    map.addLayer({
      id: 'markers',
      type: 'circle',
      source: 'markers',
      paint: {
        'circle-radius': 3,
        'circle-color': 'blue'
      }
    });
  });
}

// Choose one of these options:
// addScaledMarkers();
// addCustomMarkers();
addCircleLayer();

// Fit the map to the extent of all markers
map.on('load', () => {
  const bounds = markerCoordinates.reduce((bounds, coord) => {
    return bounds.extend(coord);
  }, new maplibregl.LngLatBounds(markerCoordinates[0], markerCoordinates[0]));

  map.fitBounds(bounds, {
    padding: 50 // Add some padding around the markers
  });
});
</script>
</body>
</html>
